<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding</title>
    <style>
     p{
        display: block;
        background-color: rgb(114, 158, 48);
        text-align: center;
        padding: 50px 0px;
     }
     .img {
         height: 500px;
         background-color: hotpink;
         background: url('../images/服务支持背景.jpg') no-repeat;
         background-attachment: fixed;
         background-size: cover;
         background-position-y: 50%;
     }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <div class="img"></div>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
</body>
</html>
<script>
    var bgImg = document.getElementsByClassName('img')[0];
    var kaishiPos = 85;
    var jieshuPos = 1336;
    var gao = jieshuPos - kaishiPos;
    // 125 -65
    window.onscroll = function(){
        if(document.documentElement.scrollTop >= kaishiPos && document.documentElement.scrollTop <= jieshuPos){
            console.log(document.documentElement.scrollTop / 10);
            bgImg.style.backgroundPositionY = 0 - (document.documentElement.scrollTop / 5) + 100 + 'px';
            // console.log(document.documentElement.scrollTop);
        }
    }
</script>